<template>
  <view class="review-container">
    <!-- 评价头部 -->
    <view class="review-header">
      <view class="review-title">评价</view>
      <view class="review-count">({{ praiseList.length || 0 }})</view>
    </view>
    <scroll-view class="scroll-view_V" scroll-y="true" @scrolltolower="onScroll" v-show="praiseList.length > 0">
      <view class="review-list">
        <view class="review-item" v-for="(item, index) of praiseList" :key="index">
          <!-- 用户信息 -->
          <view style="display: flex;align-items: center;justify-content: space-between;">
            <view class="review-user">
              <image class="user-avatar" :src="imgurl + item.avatar"></image>
              <view class="user-info">
                <p class="user-name">{{ maskedName(item.ebUserName || item.nickname) }}</p>
                <view class="review-stars">
                  <van-rate :value="item.serviceScore" size="24" color="#ff9500" readonly />
                </view>
              </view>
            </view>
            <span style="float: right; font-size: 14px; color: #999;"> {{ item.createTime }}</span>
          </view>
          <!-- 评论内容 -->
          <view class="review-content">
            <p class="review-desc">{{ item.merchantReplyContent || item.comment }}</p>
            <!-- 图片展示 -->
            <view style="display: flex;align-items: center;">
              <view class="review-images" v-if="item.pics">
                <image @click="clickImg" v-for="(img, imgIndex) in item.pics.split(',')" :key="imgIndex"
                  :src="img.includes('https') ? img : imgurl + img" class="review-image"
                  :data-src="img.includes('https') ? img : imgurl + img"></image>

              </view>
              <!-- 视频展示 -->
              <view class="review-images" v-if="item.videoUrl">
                <video class="review-image"
                  :src="item.videoUrl.includes('https') ? item.videoUrl : imgurl + item.videoUrl" controls></video>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 加载更多动画 -->
      <view class="loading-more" v-show="isLoading">
        <u-loading-icon size="30"></u-loading-icon>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { IMG_URL } from "../../../config/index";

export default {
  props: {
    praiseList: {
      type: Array,
      default: () => [],
    },
    isPage: {
      type: Boolean,
      default: false,
    },
    getLists: {
      type: Function,
      default: () => { },
    },
  },
  data() {
    return {
      imgurl: IMG_URL,
      isLoading: false,
    };
  },
  methods: {
    clickImg(e) {
      const imgSrc = e.currentTarget.dataset.src;
      uni.previewImage({
        urls: [imgSrc], // 使用当前点击图片的实际路径
        current: imgSrc, // 当前显示图片的路径
        success: function (res) { },
        fail: function (res) { },
        complete: function (res) { },
      });
    }
    ,
    onScroll(e) {
      if (this.isPage && !this.isLoading) {
        this.isLoading = true;
        this.getLists().then(() => {
          this.isLoading = false;
        });
      }
    },
    maskedName(name) {
      if (!name) return '';
      return name.slice(0, 1) + '***' + name.slice(-1);
    }
  },
};
</script>

<style lang="less" scoped>
.review-container {
  margin: 0 auto;
  width: 90%;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  background-color: #f5f5f5;
}

.review-header {
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}

.review-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.review-count {
  font-size: 28rpx;
  color: #999;
}

.scroll-view_V {
  height: 800rpx;
  /* 根据需要调整高度 */
  border-radius: 10rpx;
  background-color: #fff;
}

.review-list {
  padding: 10rpx;
}

.review-item {
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.review-user {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.user-avatar {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 28rpx;
  color: #333;
}

.review-stars {
  margin-top: 10rpx;
}

.review-content {
  margin-top: 20rpx;
}

.review-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  white-space: pre-wrap;
  /* 使文字可以换行 */
  word-break: break-all;
  /* 使长单词或 URL 地址换行 */
}

.review-images {
  display: flex;
  margin-top: 20rpx;
  flex-wrap: nowrap;
}

.review-image {
  width: 150rpx;
  height: 200rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
}

.review-video {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 10rpx;
}

.loading-more {
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
}

/* 动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
